<template>
  <div id="map-container" class="map-container">
    <div id="map"></div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import LayerSwitcherImage from 'ol-ext/control/LayerSwitcherImage' // 导入图层切换控件
import { useMapStore } from '@/stores/mapStore.js'

const mapStore = useMapStore()

const TIANDITU_Key = 'c3f0fbe49421944aa1578741360e5335'
// 导入地图控件
onMounted(() => {
  const tiandituVecMap = new window.ol.layer.Tile({
    title: '矢量底图',
    source: new window.ol.source.XYZ({
      url: `http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${TIANDITU_Key}`,
      wrapX: false,
    }),
    visible: true, // 初始可见
    baseLayer: true, //设置互斥切换
  })

  // 设置预览图路径
  tiandituVecMap.set('preview', ['/images/vecmap.png'])
  // 添加 getPreview 方法
  tiandituVecMap.getPreview = function () {
    return this.get('preview') || []
  }

  const tiandituImgMap = new window.ol.layer.Tile({
    title: '影像底图',
    source: new window.ol.source.XYZ({
      url: `http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${TIANDITU_Key}`,
      wrapX: false,
    }),
    visible: false, // 初始不可见
    baseLayer: true, //设置互斥切换
  })

  // 设置预览图路径
  tiandituImgMap.set('preview', ['/images/imgmap.png'])
  // 添加 getPreview 方法
  tiandituImgMap.getPreview = function () {
    return this.get('preview') || []
  }

  const map = new window.ol.Map({
    target: 'map',
    view: new window.ol.View({
      // 中心点设置为光谷
      center: [114.36322785022229, 30.48325778040869],
      projection: 'EPSG:4326',
      zoom: 13.5,
      minZoom: 12,
      maxZoom: 18, //18级以上底图资源没有
    }),
    layers: [tiandituImgMap, tiandituVecMap],
  })
  mapStore.setMap(map)
  // 加载IGSERVER发布的地图文档
  const docLayer = new window.Zondy.Map.Doc('', 'guanggu', {
    ip: 'localhost',
    port: '6163',
  })
  map.addLayer(docLayer)

  // 全屏控件
  const fullScreenControl = new window.ol.control.FullScreen()
  map.addControl(fullScreenControl)

  // 比例尺控件
  const scaleLineControl = new window.ol.control.ScaleLine()
  map.addControl(scaleLineControl)

  // 图层切换控件
  const layerSwitcherImage = new LayerSwitcherImage({
    // 修改默认面板展开及鼠标悬停展开为否
    collapsed: false,
    mouseover: false,
    //只显示底图
    layerGroup: new window.ol.layer.Group({
      layers: [tiandituImgMap, tiandituVecMap],
    }),
  })
  map.addControl(layerSwitcherImage)

  // 缩放到特定范围控件
  const zoomToExtentControl = new window.ol.control.ZoomToExtent({
    extent: [114.31875228881836, 30.452213287353516, 114.4197922926718, 30.532175098664375],
  })
  map.addControl(zoomToExtentControl)

  mapStore.setMap(map) // 保存到store
})
</script>

<style lang="scss" scoped>
.map-container {
  #map {
    width: 100vw;
    height: 100%;

    :deep(.ol-zoom-extent) {
      right: 0.5em;
      left: auto; //必须要加，否则控件的宽度会占满整个页面
      top: 2.7em;
      bottom: auto;
    }

    :deep(.ol-layerswitcher-image) {
      bottom: 0.5em;
      top: auto;

      .ol-visible {
        border: 3px solid rgba(0, 60, 136, 0.7);
      }
    }
  }
}
</style>
